<template>
	<view class="home">
		<view class="new_home_box my-pdl-15">
			<view class="txt">首页</view>
			<view class="tra_amount">
				<view class="tra_amount_tlt">当月团队交易额(元）</view>
				<view class="tra_amount_money">{{teamAmount || 0}}</view>
			</view>
			<view class="num_deilta">
				<view class="num_deilta_fir">
					<view class="li_txt">当月收益(元）</view>
					<view class="li_num">{{billAmount || 0}}</view>
				</view>
				<view class="num_deilta_bor"></view>
				<view class="num_deilta_thr my-mgl-40">
					<view class="li_txt">当月新增伙伴(位）</view>
					<view class="li_num">{{addTeamMemberCount || 0}}</view>
				</view>
			</view>
		</view>
		<view class="my-mgt-20">
			<kingKongarea></kingKongarea>
		</view>
		<view class="tice my-pdl-10 my-mgtb-15">
			<u-notice-bar mode="vertical" type="none" :list="noticeList"></u-notice-bar>
		</view>
		<view class="advise_turntable" @click="toTurnTable()">
			<image src="https://wanxian-test.oss-cn-shenzhen.aliyuncs.com/0987034.png"/>
		</view>
		
		<view class="details_box my-mgt-15 my-pdl-15">
			<view class="details_box_left">交易金额</view>
		</view>
		<view class="lines my-mgt-10 my-pdl-15">
			<view class="lines_tlt">
				<view class="lines_tlt_name">我的交易金额进度</view>
				<view class="lines_tlt_img my-pdt-15 my-pdr-10" @click="gomerchants">
					<text class="my-mgr-5">查看奖励</text>
					<image :src="rightarrow" style="width: 30rpx;height: 30rpx;"></image>
				</view>
			</view>
			<view class="progress_box">
				<view class="progress_line">
					<u-circle-progress border-width="35" width="280" active-color="#F05329" duration="2000" :percent="transferPer">
						<view class="u-progress-content">
							<view class='u-progress-info'>{{transferPer || 0}}%</view>
							<view class="u-progress-txt">交易</view>
						</view>
					</u-circle-progress>
				</view>
				<view class="liji_btn_box my-pdt-10">
					<view class="liji_btn_box_orig">
						上期中奖号码
					</view>
					<view class="liji_btn_box_num">
						<view class="liji_num">
							<view class="liji_num_red">{{consumeNo || 0}}</view>
							<view class="liji_num_gray my-mgt-10">消费积分</view>
						</view>
						<view class="liji_num">
							<view class="liji_num_red">{{rewardNo || 0}}</view>
							<view class="liji_num_gray my-mgt-10">奖励积分</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="qualifying_box my-pdlr-15">
			<view class="details_box">
				<view class="left">近期交易金额</view>
				<view class="right" @click="golookdetail">
					<text class="my-mgr-10">详情</text>
					<image :src="rightarrow" style="width: 30rpx;height: 30rpx;"></image>
				</view>
			</view>
			
			<view class="" v-if="tranRefArr.length > 0">
				<view class="qualifying_box_two my-pdt-10" v-for="(item,index) in tranRefArr" :key="item" v-show="tranRefArr.length > 0">
					<view class=""><text>交易金额：</text><text>{{item.transAmount|| 0}}</text></view>
					<view class=""><text>交易单号：</text><text>{{item.tranRefCode || '暂无'}}</text></view>
				</view>
			</view>
			<view class="my-flex-col-c" style="width: 100%;height: 150rpx;" v-else>暂无数据</view>
		</view>
		<view class="details_box my-mgtb-15 my-pdlr-15">
			<view class="details_box_left">热门服务</view>
		</view>
		<view class="rmservice_box">
			<view class="rmservice_box_big">
				<view class="tlt_box my-pdl-15 my-pdt-10">
					<view class="fir">积分兑换</view>
					<view class="two">积分兑换精美礼品，热门好物</view>
					<view class="btn_bind">点击查看</view>
				</view>
				<view class="img_box">
					<image src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/jxUlCMZTDV_jifen_icon.png" mode=""></image>
				</view>
			</view>
			<view class="rmservice_box_bot my-mgt-10">
				<view class="left_orig my-pdl-15 my-pdt-5">
					<view class="li_one">快速审核，立即申请</view>
					<view class="li_noces">申请信用卡</view>
					<view class="li_box">
						<view class="txt_shenqing">
							<view class="shenqing_btn">申请</view>
						</view>
						<view class="img_div">
							<image src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/HBjCFxNdPV_icard_icon.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="right_blue my-pdl-15 my-pdt-5">
					<view class="li_one">积分兑换话费流量</view>
					<view class="li_noces">话费流量充值</view>
					<view class="li_box">
						<view class="txt_shenqing">
							<view class="chongzhi_btn">充值</view>
						</view>
						<view class="img_div">
							<image src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/PWVTtDsHhY_jiantou_icon.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="details_box my-mgtb-15 my-pdlr-15">
			<view class="details_box_left">申请终端</view>
		</view>
		<view style="width: 100%;height: 80rpx;line-height: 25rpx;text-align: center;" v-if="goodDev.length <= 0">暂无数据</view>
		<view class="goods_box my-pdlr-15" v-else>
			<view class="goods_box_once my-mgt-15" v-for="(item,index) in goodDev" :key="index" @click="godetial(item.id)">
				<view class="goods_box_once_img">
					<image :src="item.imgUrl"mode=""></image>
				</view>
				<view class="goods_box_once_tlt">{{item.goodsName}}</view>
				<view class="goods_box_once_money">{{item.price}}元</view>
			</view>
		</view>
		<tabbar></tabbar>
		<Share ref="refShare"></Share>
	</view>
	
	
	
	
	
</template>

<script>
	import kingKongarea from "@/components/kingKongArea/kingKongArea.vue"
	import Share from "@/components/share_one.vue"
	import tabbar from "@/components/tabbar/tabbar.vue"
	import {bannerApi,scheduleApi,amountApi,finalGoodsApi,homeheaDataApi} from "@/api/home.js"
	export default {
		components: {
			kingKongarea,
			tabbar,
			Share
		},
		data() {
			return {
				list: [],//轮播数组
				noticeList: [
					'恭喜小明成功领取1600红包积分！',
					'恭喜小王成功领取3800红包积分！',
					'恭喜小五成功领取1300红包积分！',
					'恭喜李三成功领取4600红包积分！',
					'恭喜王二成功领取2700红包积分！'
				],
				rightarrow:'https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/wQnZZqNAjB_rightarrow_icon.png',
				consumeNo:'',//消费积分
				rewardNo:'',//奖励积分
				transferPer:'',//交易百分比
				tranRefArr:[],//交易数组
				pageIndex: 0, //页数
				pageSize: 30, //条数
				goodDev: [],
				total: 1,
				addTeamMemberCount:0,//当月新增伙伴数量
				billAmount:0,//当月收益
				teamAmount:0,//当月团队交易额
			};
		},
		created() {
			// this.getBanner()
			this.getRequest()
		},
		onShow() {
			this.handleShare();
		},
		// 上拉加载更多
		onReachBottom() {
			this.getGoods()
		},
		methods:{
			toTurnTable(){
				uni.navigateTo({
					url:'/pages/main/pointWheel'
				})
			},
			handleShare(){
				this.$refs.refShare.handleShowShare();
			},
			getRequest(){
				uni.showLoading({
					title: "正在加载中....",
					mask:true
				})
				Promise.all([this.getHeadData(),this.getSchedule(),this.getAmount(),this.getGoods()]).then(()=>{uni.hideLoading()}).catch(()=>{
					uni.showToast({
						title:'数据报错了',
						icon:'none'
					})
				})
			},
			// 获取头部数据
			async getHeadData(){
				const res = await homeheaDataApi({})
				if(res.statusCode === 200){
					this.addTeamMemberCount = res.data.data.addTeamMemberCount
					this.billAmount = res.data.data.billAmount
					this.teamAmount = res.data.data.teamAmount
				}
			},
			// 查看详情
			golookdetail(){
				uni.navigateTo({
					url:"/pages/main/lookDetails"
				})
			},
			// 订单详情
			godetial(goodid){
				uni.setStorageSync("id",goodid)
				uni.navigateTo({
					url:"/pages/mallStore/lineItem"
				})
			},
			// 查看奖励
			gomerchants(){
				uni.navigateTo({
					url:"/pages/main/childPages/merchantsReward"
				})
			},
			// 轮播图
			async getBanner(){
				uni.showLoading({
					title: "正在加载中...."
				})
				const res = await bannerApi({})
				if(res.statusCode === 200){
					uni.hideLoading()
					res.data.data.forEach(item=>{
						this.list.push({image:item.imgUrl,title:item.imgLink})
					})
				}
			},
			// 交易进度
			async getSchedule(){
				const res = await scheduleApi({})
				if(res.statusCode === 200){
					this.consumeNo=res.data.data.consumeNo
					this.rewardNo=res.data.data.rewardNo
					this.transferPer=parseInt(res.data.data.transferPer * 100 - 0)
				}
			},
			// 交易金额
			async getAmount(){
				let params = {
					pageIndex:0,
					pageSize:2
				}
				const res = await amountApi(params)
				if(res.statusCode === 200){
					if(res.data.data===null){
						this.tranRefArr = []
					}else{
						this.tranRefArr = res.data.data.rows
					}
					
				}
			},
			// 终端商品
			async getGoods(){
				if (this.goodDev.length >= this.total) return
				let params = {
					pageIndex: this.pageIndex,
					pageSize: this.pageSize
				}
				const res =await finalGoodsApi(params)
				if(res.statusCode === 200){
					this.goodDev = res.data.data === null ? [] : [...this.goodDev, ...res.data.data.rows]
					this.total = res.data.data.total
					this.pageIndex++
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		width: 100%;
		background: #F7F7F7;
		.advise_turntable{
			height: 300rpx;
			margin: auto 32rpx;
			border-radius: 16rpx;
			image{
				height: 300rpx;
				width: 100%;
				border-radius: 16rpx;
			}
		}
		.new_home_box{
			width: 100%;
			height: 473rpx;
			background: linear-gradient(128deg, #F05329 0%, #F06629 100%);
			.txt {
				width: 100%;
				height: 130rpx;
				line-height: 170rpx;
				font-size: 40rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}
			.tra_amount{
				width: 100%;
				height: 180rpx;
				.tra_amount_tlt{
					width: 100%;
					line-height: 60rpx;
					font-size: 30rpx;
					font-weight: 500;
					color: #e6c5bf;
				}
				.tra_amount_money{
					width: 100%;
					line-height: 70rpx;
					font-size: 60rpx;
					font-weight: bold;
					color: #FFFFFF;
				}
			}
			.num_deilta{
				width: 100%;
				height: 160rpx;
				display: flex;
				align-items: center;
				.num_deilta_fir{
					width: 48%;
					height: 100%;
				}
				.num_deilta_bor{
					width: 1rpx;
					height: 60rpx;
					background: #e6e6e6;
				}
				.num_deilta_thr{
					width: 40%;
					height: 100%;
				}
				.li_txt,.li_num{
					width: 100%;
					line-height: 70rpx;
				}
				.li_txt{
					font-size: 30rpx;
					font-weight: 500;
					color: #e6c5bf;
				}
				.li_num{
					font-size: 50rpx;
					font-weight: bold;
					color: #FFFFFF;
				}
			}
		}
		.home-title {
			width: 100%;
			height: 150rpx;
			background: #FFFFFF;
			display: flex;
			padding-top: 70rpx;

			.txt {
				width: 89%;
				font-size: 40rpx;
				font-weight: bold;
				color: #333333;
			}

			image {
				width: 45rpx;
				height: 45rpx;
				padding-top: 5rpx;
			}
		}

		.wrap {
			width: 100%;
			height: 298rpx;
		}

		.tice {
			width: 690rpx;
			height: 85rpx;
			margin: auto;
			background: #FFFFFF;
			border-radius: 43rpx;
			padding-top: 8rpx;
		}

		.lines {
			width: 690rpx;
			height: 400rpx;
			margin: auto;
			border-radius: 20rpx;
			background: #FFFFFF;

			.lines_tlt {
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.lines_tlt_img{
					width: 30%;
					height: 100%;
					font-size: 30rpx;
					font-weight: 500;
					color: #999999;
					text-align: right;
				}
				.lines_tlt_name{
					width: 70%;
					height: 100%;
					line-height: 100rpx;
					font-size: 36rpx;
					font-weight: 500;
					color: #000000;
				}
			}

			.progress_box {
				width: 100%;
				height: 220rpx;
				display: flex;

				.progress_line {
					width: 310rpx;
					height: 150rpx;

					.u-progress-content {
						width: 50%;
						height: 100rpx;
						text-align: center;
					}
					.u-progress-info {
						width: 100%;
						height: 60rpx;
						text-align: center;
						line-height: 70rpx;
						font-size: 38rpx;
						font-weight: bold;
						color: #F05329;
					}
					.u-progress-txt{
						font-size: 28rpx;
						font-weight: 500;
						color: #999999;
					}

					.line_num {
						width: 100%;
						height: 30rpx;
						display: flex;
						line-height: 10rpx;
						justify-content: center;
						font-size: 24rpx;
						font-weight: 400;
						color: #000000;
					}

					.line_scope {
						width: 100%;
						height: 35rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 24rpx;
						font-weight: 500;
						color: #999999;
					}
				}

				.liji_btn_box {
					width: 310rpx;
					height: 300rpx;
					.liji_btn_box_orig{
						width: 100%;
						height: 80rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 26rpx;
						font-weight: bold;
						color: #000000;
					}
					.liji_btn_box_num{
						width: 100%;
						height: 150rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.liji_num{
							display: flex;
							flex-direction: column;
							align-items: center;
							.liji_num_red{
								font-size: 36rpx;
								font-weight: 500;
								color: #F05329;
							}
							.liji_num_gray{
								font-size: 24rpx;
								font-weight: 500;
								color: #999999;
							}
						}
					}
				}
			}
		}

		.details_box {
			width: 100%;
			height: 80rpx;
			display: flex;
			align-items: center;
			.details_box_left,.left {
				width: 80%;
				height: 80rpx;
				line-height: 80rpx;
				color: #000000;
			}
			.details_box_left{
				font-size: 40rpx;
				font-weight: bold;
			}
			.left{
				font-size: 34rpx;
				font-weight: 500;
			}

			.details_box_right,.right {
				width: 20%;
				height: 80rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: #999999;
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}
		}

		.qualifying_box {
			width: 690rpx;
			height: 270rpx;
			margin: auto;
			margin-top: 50rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			.qualifying_box_two {
				width: 100%;
				height: 90rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}

		.rmservice_box {
			width: 690rpx;
			height: 440rpx;
			margin: auto;
			.rmservice_box_big{
				width: 100%;
				height: 200rpx;
				background: linear-gradient(90deg, #C8DDD4 0%, #D5E5DA 100%);
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				.tlt_box{
					width: 70%;
					height: 100%;
					.fir{
						width: 100%;
						height: 60rpx;
						line-height: 60rpx;
						font-size: 38rpx;
						font-weight: bold;
						color: #000000;
					}
					.two{
						width: 100%;
						height: 60rpx;
						line-height: 60rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #000000;
					}
					.btn_bind{
						width: 123rpx;
						height: 40rpx;
						line-height: 40rpx;
						text-align: center;
						background: #FFFFFF;
						opacity: 0.7;
						border-radius: 5rpx;
						font-size: 24rpx;
						font-weight: bold;
						color: #BADBCD;
					}
				}
				.img_box{
					width: 183rpx;
					height: 169rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
			.rmservice_box_bot{
				width: 100%;
				height: 200rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left_orig,.right_blue{
					width: 335rpx;
					height: 200rpx;
					border-radius: 20rpx;
					.li_one{
						width: 100%;
						height: 40rpx;
						line-height: 50rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #000000;
					}
					.li_noces{
						width: 100%;
						height: 40rpx;
						line-height: 50rpx;
						font-size: 28rpx;
						font-weight: bold;
						color: #000000;
					}
					.li_box{
						width: 100%;
						height: 110rpx;
						display: flex;
						align-items: center;
						.txt_shenqing{
							width: 50%;
							height: 100%;
							display: flex;
							align-items: center;
							padding-top: 30rpx;
							.shenqing_btn,.chongzhi_btn{
								width: 88rpx;
								height: 34rpx;
								text-align: center;
								border-radius: 17rpx;
								font-size: 22rpx;
								font-weight: 500;
							}
							.shenqing_btn{
								border: 1rpx solid #F2A900;
								color: #E68B03;
							}
							.chongzhi_btn{
								border: 1px solid #4D7FF9;
								color: #3169F2;
							}
						}
						.img_div{
							width: 50%;
							height: 100%;
							image{
								width: 136rpx;
								height: 103rpx;
							}
						}
					}
				}
				.left_orig{
					background: linear-gradient(90deg, #FED883 0%, #FFEABD 100%);
				}
				.right_blue{
					background: linear-gradient(90deg, #7DCDFE 0%, #BBE5FE 100%);
				}
			}
		}

		.goods_box {
			width: 100%;
			height: auto;
			min-height: 460rpx;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.goods_box_once {
				width: 335rpx;
				height: 460rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 9rpx 1rpx rgba(0, 0, 0, 0.1);
				border-radius: 10rpx;

				.goods_box_once_img {
					width: 100%;
					height: 330rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.goods_box_once_tlt,
				.goods_box_once_money {
					width: 100%;
					height: 60rpx;
					line-height: 50rpx;
					font-size: 30rpx;
					font-weight: 500;
					color: #000000;
					padding-left: 23rpx;
				}

				.goods_box_once_money {
					color: #F05329;
				}
			}
		}
	}
</style>
